/*
 * @Description:
 * @Author: fhw
 * @Date: 2023-02-23 15:46:26
 */
import { FormConfig, FormUpload } from '@/components'
import { DoType, getDoTypeTitle } from '@/interfaces'
import { errorTips, successTips } from '@/utils'
import { isTrue } from '@/utils/tools'
import { clone, equals } from 'ramda'
import { computed, defineComponent, PropType, reactive, ref, watch } from 'vue'
import { BasicDataModule } from '@/store/modules/basicData'
import { useDiff } from '@/hooks/usediff'
const props = {
	visible: {
		type: Boolean as PropType<boolean>,
		required: true,
	},
	dataSource: {
		type: Object as PropType<defs.server.TagEntity>,
	},
} as const
export default defineComponent({
	props,
	name: 'CreateIndex',
	emits: ['cancel', 'search'],
	setup(props, { emit }) {
		const { lhs, diff } = useDiff<defs.server.TagEntity>(['name', 'lang', 'sort', 'status'])

		const rules = {
			name: [{ required: true, message: '请输入标签名称', trigger: 'change' }],
			lang: [{ required: true, message: '请选择语言', trigger: 'change' }],
			sort: [{ required: true, type: 'number', message: '请输入排序值', trigger: 'change' }],
			status: [{ required: true, message: '请选择启用状态', trigger: 'change' }],
		}
		const pageState = reactive({
			loading: false,
			type: DoType.create,
			formData: {} as defs.server.TagEntity,
		})
		function cancel() {
			pageState.type = DoType.create
			pageState.formData = {} as defs.server.TagEntity
			pageState.loading = false
			emit('cancel')
		}
		async function submit() {
			const params = {
				name: pageState.formData.name as string,
				lang: pageState.formData.lang,
				id: pageState.formData.id as number,
			}
			const diffStr = diff(params)
			const func = equals(pageState.type, DoType.create)
				? API.server.tag.createTag.request
				: API.server.tag.updateTag.request
			pageState.loading = true
			const { success, msg } = await func({ ...params, diff: diffStr?.filter(Boolean) as any[] })
			pageState.loading = false
			if (success) {
				successTips(`${getDoTypeTitle(pageState.type)}成功`)
				cancel()
				emit('search')
				BasicDataModule.getCategoryList()
				return
			}
			errorTips(msg)
		}
		watch(
			() => props.visible,
			(visible) => {
				if (visible) {
					pageState.formData = clone(props.dataSource) ?? {} as defs.server.TagEntity
					lhs.value = clone(pageState.formData)
					pageState.type = isTrue(props.dataSource?.id) ? DoType.edit : DoType.create
				}
			}
		)
		return () => (
			<div>
				<a-modal
					title={`${getDoTypeTitle(pageState.type)}标签`}
					visible={props.visible}
					onCancel={cancel}
					footer={null}
					centered
					confirmLoading={pageState.loading}
				>
					<a-form
						class="ant-advanced-search-form"
						labelCol={{ span: 8 }}
						wrapperCol={{ span: 14 }}
						model={pageState.formData}
						rules={rules}
						onFinish={submit}
					>
						<a-row>
							<a-col span={24}>
								<a-form-item name="name" label="标签名称">
									<a-input v-model={[pageState.formData.name, 'value']} />
								</a-form-item>
							</a-col>
							<a-col span={24}>
								<a-form-item name="lang" label="语言">
									<FormConfig prop="lang" v-model={[pageState.formData.lang, 'value']} />
								</a-form-item>
							</a-col>
						</a-row>
						<div style={{ textAlign: 'center' }}>
							{[DoType.create, DoType.edit].includes(pageState.type) && (
								<a-button type="primary" loading={pageState.loading} html-type="submit">
									提交
								</a-button>
							)}
							<a-button onClick={cancel}>取消</a-button>
						</div>
					</a-form>
				</a-modal>
			</div>
		)
	},
})
